<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我们的优势</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .feature_box ul{
            display: flex;
            justify-content: space-between;
        }
        .feature_box ul li{
            -ms-flex: 0 0 31.5%;
            flex: 0 0 31.5%;
            max-width:0 0 31.5%;
            max-height: 441px;
        }
        .feature_list_service{
            margin-bottom: 120px;
            max-width: 304px;
        }
        .feature_box ul li span{
            font-size:34px;
            color:var(--c_theme);
            line-height: 51px;
            font-weight: bold;
        }
        .feature_box ul li span i{
            display: inline-block;
            font-size: 20px;
            color: var(--c_text);
            font-weight:500;
        }
        .feature_box ul li p{
            font-size:14px;
            line-height: 36px;
            margin-top: 30px;
            color: #999999;
        }
        .feature_box ul li .feature_img{
            width: 340px;
            height: 340px;
            overflow: hidden;
                transform: rotate(45deg) translate(20%, 30%);
            overflow: hidden;
        }
        .feature_box ul li .feature_img img{
            width: 100%;
            height: 100%;
            width: 150%;
            height: 150%;
            transform: rotate(-45deg) translate(0px, -25%);
        }
        .feature_box ul li:nth-of-type(3) .feature_list_service{
            padding-left: 0; 
        }
        @media screen and (max-width:768px){
            .feature_box ul {
                flex-wrap: wrap;
            }
            .feature_box ul li{
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width:0 0 100%;
                max-height: 441px;
            }
            .feature_list_service {
                    margin-bottom: 20px;
            }
            .feature_box ul li p{
                margin-top: 0px;
                max-width: 100%;
            }
            .feature_box ul li .feature_img{
                width: 100%;
                height: 100%;
                transform: rotate(0);
                margin: 0;
            }
            .feature_box ul li .feature_img img {
                width: 100%;
                height: 100%;
                transform: rotate(0) translate(0px, 0);
                object-fit: cover;
            }
            .feature_box ul li:nth-of-type(3) .feature_list_service {
                padding-left: 0;
            }
            .feature_box ul li:nth-of-type(3){
                padding-top: 20px;
            }
            .feature_box ul li span{
                font-size: 20px;
            }
            .feature_box ul li span i {
                font-size: 16px;
            }
            .public_width{
                box-sizing: border-box;
            }
        }

    </style>
</head>
<body>
    <div class="feature modular title_center ">
        <div class="feature_box public_width">
            <div class="public_title">
                <h2>我们的优势</h2>
                <p>Our Advantages</p>
            </div>
            <ul>
                <li>
                    <div class="feature_list_service">
                        <span>
                            A.
                            <i>专业的服务保障</i>
                        </span>
                        <p>广州市消费者协会认证“售后服务信得”单位，
                            广州市百家“维权承诺”单位，
                            北京市首批“服务承诺宣言”文化传播企业。
                        </p>
                    </div>
                    <div class="feature_list_service">
                        <span>
                            A.
                            <i>专业的服务保障</i>
                        </span>
                        <p>广州市消费者协会认证“售后服务信得”单位，
                            广州市百家“维权承诺”单位，
                            北京市首批“服务承诺宣言”文化传播企业。
                        </p>
                    </div>
                    
                </li>
                <li>
                    <div class="feature_img">
                        <img src="../images/product_list_2_2.png.jpeg" alt="">
                    </div>
                </li>
                <li>
                    <div class="feature_list_service">
                        <span>
                            A.
                            <i>专业的服务保障</i>
                        </span>
                        <p>广州市消费者协会认证“售后服务信得”单位，
                            广州市百家“维权承诺”单位，
                            北京市首批“服务承诺宣言”文化传播企业。
                        </p>
                    </div>
                    <div class="feature_list_service">
                        <span>
                            A.
                            <i>专业的服务保障</i>
                        </span>
                        <p>广州市消费者协会认证“售后服务信得”单位，
                            广州市百家“维权承诺”单位，
                            北京市首批“服务承诺宣言”文化传播企业。
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>